<template>
  <!-- <div>
    商品管理
  </div> -->
  <div>

    <el-form :inline="true" :model="goods" class="demo-form-inline">
      <el-form-item label="商品名称" style="float: left; margin-left:0px;">
        <el-input v-model="goods.goodsName" style="width:100%;"></el-input>
      </el-form-item>
      <el-form-item label="类别名称">
        <el-select v-model="goods.currGoodsCateName" clearable placeholder="请选择">
          <el-option
            v-for="item in goods.goodsCateNameList"
            :key="item.id"
            :label="item.goodsCateName"
            :value="item.goodsCateName">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="仓库名称" style="margin-left: 20px;">
        <el-select v-model="goods.currWareName" clearable placeholder="请选择">
          <el-option
            v-for="item in goods.wareNameList"
            :key="item.id"
            :label="item.warehouseName"
            :value="item.warehouseName">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="margin-left:20px;">
        <el-button type="primary" @click="getPageList()">搜索</el-button>
      </el-form-item>
    </el-form>

    <router-link to="/goods_save">
      <el-button type="primary" style="float:left; width:60px; height:32px; padding:0px;">新增</el-button>
    </router-link>
    <el-table :data="initData">
    <el-table-column prop="goods_name" label="商品名称" width="200">
    </el-table-column>
    <el-table-column prop="cate_name" label="商品类别" width="200">
    </el-table-column>
    <el-table-column prop="goods_num" label="商品数量" width="200">
    </el-table-column>
    <el-table-column prop="warehouse_name" label="仓库" width="200">
    </el-table-column>
    <el-table-column label="操作">
        <template slot-scope="scope">
            <!-- 编辑 -->
            <router-link :to="{
              name:'goods_edit',
              path:'/goods_edit',
              params:{
                id:scope.row.id,
                goodsName:scope.row.goods_name,
                goodsCateName:scope.row.cate_name,
                warehouseName:scope.row.warehouse_name
              }
            }">
                <el-button type="primary" size="mini" icon="el-icon-edit"> 
                  编辑
                </el-button>
            </router-link>
            &nbsp;
            <router-link :to="{
              name:'opt_record',
              path:'/opt_record',
              params:{
                opt_id:scope.row.id,
                opt_module:'goods'
              }
            }">
              <el-button type="info" size="mini" icon="el-icon-message"> 
                日志
              </el-button>
            </router-link>
        </template>
    </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :current-page="pageNo"
      :page-size="pageSize"
      :total="total"
      style="padding: 30px 0; text-align: right;"
      layout="total, prev, pager, next, jumper"
      @current-change="getPageList"
    />
  </div>
</template>

<script>
import goods from '@/api/goods';
import ware from '@/api/ware';
import goods_cate from '@/api/goods_cate';
export default {
  name:'GoodsList',
  data(){
    return {
      pageNo:1,
      pageSize:20,
      total:0,
      initData: [],
      goods:{
        goodsCateNameList:[],
        wareNameList:[],
        currGoodsCateName:'',
        currWareName:'',
        goodsName:''
      }
    }
  },
  methods:{
    initWareGoodsData(){
      let queryGoodsDto = {
        pageNo:1,
        pageSize:this.pageSize,
        goodsName:this.goods.goodsName,
        goodsCateName:this.goods.currGoodsCateName,
        warehouseName:this.goods.currWareName
      }
      goods.getGoodsList(queryGoodsDto).then(
        response => {
          console.log('商品列表响应数据：', response)
          let resCode = response.data.code
          let resMsg = response.data.message
          if(resCode == "200") {
            this.initData = response.data.data.data_list
            this.pageNo = response.data.data.page_no
            this.pageSize = response.data.data.page_size
            this.total = response.data.data.total
          } else {
            //异常提示
            this.$message({
                type: 'error',
                message: resMsg
            })
          }
        },
        error => {
          console.error('请求商品列表异常，异常信息：', error)
        }
      )
    },
    getPageList(pageNo = 1){
      this.pageNo = pageNo
      let queryGoodsDto = {
        pageNo:this.pageNo,
        pageSize:this.pageSize,
        goodsName:this.goods.goodsName,
        goodsCateName:this.goods.currGoodsCateName,
        warehouseName:this.goods.currWareName
      }
      goods.getGoodsList(queryGoodsDto).then(
        response => {
          console.log('商品列表响应数据：', response)
          let resCode = response.data.code
          let resMsg = response.data.message
          if(resCode == "200") {
            this.initData = response.data.data.data_list
            this.pageNo = response.data.data.page_no
            this.pageSize = response.data.data.page_size
            this.total = response.data.data.total
          } else {
            //异常提示
            this.$message({
                type: 'error',
                message: resMsg
            })
          }
        },
        error => {
          console.error('请求商品列表异常，异常信息：', error)
        }
      )
    }
  },
  beforeMount(){
    console.log('开始初始化仓库商品数据...')
    this.initWareGoodsData()
  },
  beforeCreate(){
    //初始化下拉列表数据
    ware.showAllWareName().then(
      response => {
          console.log('初始化仓库响应：', response)
          let resCode = response.data.code
          let resMsg = response.data.message
          if(resCode == '200'){
              this.goods.wareNameList = response.data.data.data_list
              console.log('初始化仓库列表', this.goods.wareNameList)
          } else {
              //异常提示
              this.$message({
                  type: 'error',
                  message: resMsg
              })
          }
      },
      error => {
          console.error('获取仓库名称异常，异常信息：', error)
      }
    )
    goods_cate.showAllGoodCateName().then(
      response => {
          console.log('初始化商品分类列表响应：', response)
          let resCode = response.data.code
          let resMsg = response.data.message
          if(resCode == '200'){
              this.goods.goodsCateNameList = response.data.data.data_list
              console.log('初始化商品分类列表', this.goods.goodsCateNameList)
          } else {
              //异常提示
              this.$message({
                  type: 'error',
                  message: resMsg
              })
          }
      },
      error => {
          console.error('获取商品分类名称列表异常，异常信息：', error)
      }
    )
  }
}
</script>

<style scoped>
  /* .el-input{
    width:auto;
  } */
</style>